<template>
  <wux-spin nested :spinning="spinning">
    <div class="root">
      <wux-toptips id="wux-toptips" />
      <div class="root_son">
        <div class="user-info" v-if="leaseInfo === true">
          <wux-span nested :spinning="contentSpinning">
            <wux-cell-group title="客户信息">
              <wux-cell hover-class="none">
                <wux-input
                  label="姓名"
                  placeholder="请输入您的真实姓名"
                  :value="user.realName"
                  @blur="onRealNameBlur"
                  controlled
                ></wux-input>
              </wux-cell>
              <wux-cell hover-class="none">
                <wux-input
                  label="手机号"
                  type="number"
                  placeholder="请输入您的手机号码"
                  :value="user.phone"
                  @blur="onPhoneBlur"
                  @change="onPhoneChange"
                  controlled
                ></wux-input>
              </wux-cell>
              <wux-cell hover-class="none" v-if="showCodeInput">
                <wux-input
                  label="验证码"
                  placeholder="请输入验证码"
                  :value="verCode"
                  @blur="onVerCodeBlur"
                  controlled
                >
                  <view slot="footer" class="ver-btn" @click="vcode">
                    {{ c2 || "获取验证码" }}
                  </view>
                </wux-input>
                <!-- <div class="weui-cells weui-cells_after-title">
                  <div class="weui-cell weui-cell_input weui-cell_vcode">
                    <div class="weui-cell__hd">
                      <div class="weui-label">验证码</div>
                    </div>
                    <div class="weui-cell__bd">
                      <input class="weui-input" placeholder="请输入验证码" />
                    </div>
                    <div class="weui-cell__ft">
                      <div class="weui-vcode-btn" @click="vcode">
                        
                      </div>
                    </div>
                  </div>
                </div>-->
              </wux-cell>
              <wux-cell hover-class="none">
                <wux-input
                  label="客房号"
                  placeholder="如果没有可以为空"
                  :value="user.roomNum"
                  @blur="onRoomNumBlur"
                  controlled
                ></wux-input>
              </wux-cell>
            </wux-cell-group>
          </wux-span>
        </div>
        <div class="orders_outer">
          <div class="orders_title">
            <span>{{ shop.title }}</span>
            <div class="create-time">{{ date }}</div>
          </div>
          <div
            class="order_content"
            v-for="(item, id) in submitGoods.goodsNum"
            :key="id"
          >
            <div class="orders_list">
              <div class="icon_img">
                <img
                  class="img"
                  :src=" (item.img === undefined || item.img) === '' ? '../../../static/images/unknown.png' : item.img "
                />
              </div>
              <div class="name_describe">
                <p class="name_describe_title">{{ item.title }}</p>
                <div class="title_value" v-if="submitGoods.target === 3">
                  租赁数量：1
                </div>
                <span class="title_value" v-else>
                  {{
                    item.amount === undefined
                      ? item.daily + " 天"
                      : "X " + item.amount
                  }}
                </span>
              </div>
              <div class="lease-price" v-if="submitGoods.target === 3">
                <span>押金</span>
                <span class="val">￥ {{ item.price }}</span>
              </div>
              <div class="price" v-else>
                <span>￥</span>
                <span>
                  {{
                    item.salePrice *
                    (item.amount === undefined ? item.daily : item.amount)
                  }}
                </span>
              </div>
            </div>
            <div class="lease-info" v-if="submitGoods.target === 3">
              <div class="lease-title">
                免费时长：
                <span class="val">{{ item.freeCount }}</span>
                {{ item.cycleVal }}
              </div>
              <!-- <div class="lease-title">
                租赁费用：
                <span class="val">{{item.serviceCharge}}</span>
                元
              </div>-->
              <div class="lease-title">
                租赁费用：
                <span class="val">{{ item.timeoutPay }}</span>
                元 / {{ item.cycleVal }}
              </div>
              <div class="lease-title">
                买断时长：
                <span class="val">{{ item.timeoutBuyout }}</span>
                {{ item.cycleVal }}
              </div>
              <div class="lease-title">
                买断金额：
                <span class="val">{{ item.buyoutPrice }}</span>
                元
              </div>
              <!-- <ul class="lease-ui">
                <li>1、不足1 {{item.cycleVal}}按1 {{item.cycleVal}}收取</li>
                <li>2、租赁费将在退还押金时自动扣除</li>
                <li>3、酒店退房时未归还租赁商品的将不再退还商品押金</li>
              </ul>-->
            </div>
          </div>
        </div>
      </div>
      <div class="settlement">
        <div class="total">
          <div class="price_div">
            <span class="price_title">需支付</span>
            <span class="dollars">￥</span>
            <span class="money">{{ submitGoods.totalPrice }}</span>
          </div>
          <div class="settlement_btn" v-on:click="onPay()">
            <span>支付订单</span>
          </div>
        </div>
      </div>
    </div>
  </wux-spin>
</template>

<script>
import { pay } from "@/api/pay";

import systemApi from "@/api/system";

import { $wuxToptips, $wuxCountDown } from "../../static/wux/index";

export default {
  data() {
    return {
      date: new Date().toLocaleString(),
      contentSpinning: false,
      c2: "",
      c: "",
      showCodeInput: true,
      verCode: "",
      tempUser: {}
    };
  },
  computed: {
    leaseInfo() {
      return this.$store.state.leaseInfo;
    },
    submitGoods() {
      return this.$store.state.submitGoods;
    },
    shop() {
      return this.$store.state.shop;
    },
    user() {
      return this.$store.state.user;
    },
    spinning() {
      return this.$store.state.paySpinning;
    }
  },
  mounted() {
    this.getUser();
    this.tempUser = this.user;
    if (this.tempUser.phone !== "") {
      this.showCodeInput = false;
    }
  },
  methods: {
    pay,
    vcode() {
      let flag = this.checkPhone();
      if (!flag) {
        return false;
      }
      if (this.c2 && this.c.interval) return !1;
      let that = this;

      this.$store.dispatch("setPaySpinning", true);
      this.$http
        .post({
          url: systemApi.getCode,
          method: "POST",
          body: {
            openId: that.$store.state.user.openId,
            phone: that.tempUser.phone
          }
        })
        .then((res) => {
          if (res.data.code === 1) {
            $wuxToptips().success({
              hidden: false,
              text: "验证码已发送,请注意查收",
              duration: 3000,
              success() { }
            });
            that.c = new $wuxCountDown({
              date: +new Date() + 60000,
              onEnd() {
                that.c2 = "获取验证码";
              },
              render(date) {
                const sec = date.sec;
                if (date.sec !== 0) {
                  that.c2 = sec + " 秒 ";
                }
              }
            });
          }
          that.$store.dispatch("setPaySpinning", false);
        })
        .then((res) => {
          that.$store.dispatch("setPaySpinning", false);
        });
    },
    checkPhone() {
      if (!/^1[0-9]{10}$/.test(this.tempUser.phone)) {
        $wuxToptips().error({
          hidden: false,
          text: "手机号码有误，请重填",
          duration: 1000,
          success() { }
        });
        this.$store.dispatch("setPaySpinning", false);
        return false;
      }
      return true;
    },
    onRealNameBlur(e) {
      this.$set(this.tempUser, "realName", e.target.value);
    },
    onVerCodeBlur(e) {
      this.verCode = e.target.value;
    },
    onPhoneBlur(e) {
      this.$set(this.tempUser, "phone", e.target.value);
      if (this.tempUser.phone === this.user.phone) {
        this.showCodeInput = false;
      } else {
        this.showCodeInput = true;
      }
    },
    onPhoneChange(e) {
      // if (e.target.value.length >= 11) {
      if (e.target.value === this.user.phone) {
        this.showCodeInput = false;
      } else {
        this.showCodeInput = true;
      }
      // }
    },
    onRoomNumBlur(e) {
      this.$set(this.tempUser, "roomNum", e.target.value);
    },
    onPay() {
      this.$store.dispatch("setPaySpinning", true);
      if (this.leaseInfo && (this.tempUser.realName === "" || this.tempUser.phone === "")) {
        $wuxToptips().error({
          hidden: false,
          text: "请填写姓名/手机号!",
          duration: 1000,
          success() { }
        });
        this.$store.dispatch("setPaySpinning", false);
        return false;
      }
      //如果需要填写验证码，则验证码不能为空
      if (this.leaseInfo && this.showCodeInput && this.verCode === "") {
        $wuxToptips().error({
          hidden: false,
          text: "请填写验证码!",
          duration: 1000,
          success() { }
        });
        this.$store.dispatch("setPaySpinning", false);
        return false;
      }
      if (this.leaseInfo) {
        let flag = this.checkPhone();
        if (!flag) {
          return false;
        }
      }

      if (this.leaseInfo && this.showCodeInput) {
        this.$http
          .post({
            url: systemApi.checkCode,
            method: "POST",
            body: {
              openId: this.$store.state.user.openId,
              code: this.verCode,
              phone: this.tempUser.phone
            }
          })
          .then((res) => {
            if (res.code !== 0) {
              this.$store.commit("saveUser", this.tempUser);
              this.pay();
            }
            this.$store.dispatch("setPaySpinning", false);
          })
          .then((res) => {
            this.$store.dispatch("setPaySpinning", false);
          });
      } else {
        this.pay();
      }
    },
    getUser() {
      let self = this;
      if (JSON.stringify(this.$store.state.user) === "{}") {
        wx.showModal({
          title: "提示",
          content: "请先登录",
          success: function (res) {
            if (res.confirm) {
              wx.redirectTo({
                url: "/pages/login"
              });
            }
          }
        });
        return false;
      }
      this.contentSpinning = true;
      this.$http
        .post({
          url: systemApi.getUser,
          method: "POST",
          body: {
            openId: self.$store.state.user.openId
          }
        })
        .then((res) => {
          self.$store.commit("saveUser", res);
          this.user.realName = res.realName === undefined ? "" : res.realName;
          this.user.phone = res.phone === undefined ? "" : res.phone;
          self.contentSpinning = false;
        })
        .then((res) => {
          self.contentSpinning = false;
        });
    }
  }
};
</script>


<style scoped lang="less">
.root {
  height: 100vh;
  overflow-y: auto;
  background: #f3f3f3;
  .root_son {
    padding: 10px 0 60px 0;
    .orders_outer {
      padding: 0 10px 10px 10px;
      .orders_title {
        background: #fff;
        padding: 15px;
        font-size: 15px;
        border-bottom: 1px solid #f3f3f3;
        .create-time {
          font-size: 12px;
          color: #999999;
          float: right;
        }
      }
      .order_content {
        background: #fff;
        .orders_list {
          overflow: hidden;
          border-radius: 5px;
          display: flex;
          position: relative;
          box-sizing: border-box;
          .icon_img {
            width: 80px;
            height: 80px;
            flex: 0.5;
            padding: 3px;
            .img {
              width: 100%;
              height: 100%;
            }
          }
          .name_describe {
            padding: 10px;
            flex: 1;
            .name_describe_title {
              word-wrap: break-word;
              word-break: break-all;
              overflow: hidden;
              display: -webkit-box;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2; /*要显示的行数*/
              -webkit-box-orient: vertical;
            }
            p {
              font-size: 15px;
              font-weight: 700;
              margin-bottom: 5px;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2; // 2行
              word-break: break-all; // 换行
              display: -webkit-box;
              -webkit-box-orient: vertical;
            }
            .title_value {
              font-size: 12px;
            }
          }
          .price {
            flex: 0.5;
            line-height: 80px;
            text-align: center;
            color: #c89f62;
          }
          .lease-price {
            flex: 0.6;
            line-height: 80px;
            text-align: center;
            font-size: 15px;

            .val {
              padding-left: 10px;
              color: #c89f62;
            }
          }
          &:after {
            content: " ";
            position: absolute;
            height: 1px;
            background-color: #efefef;
            bottom: 0;
            left: 0;
            width: 100%;
          }
        }
        .lease-info {
          padding: 10px;
          font-size: 13px;
          .lease-title {
            font-size: 14px;
            .val {
              color: #c89f62;
            }
          }
          .lease-ui {
            padding: 5px;
          }
        }
        &:after {
          content: " ";
          position: absolute;
          height: 1px;
          background-color: #efefef;
          bottom: 0;
          left: 0;
          width: 100%;
        }
      }
    }
    .user-info {
      background-color: #fff;
      margin: 10px;
      .ver-btn {
        margin-left: 5px;
        padding: 10px 5px;
        font-size: 13px;
        background-color: #3ec73e;
        border: 1px solid #3ec73e;
        color: #fff;
        border-radius: 5px;
        width: 65px;
        text-align: center;
      }
    }
  }
  .settlement {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    z-index: 100;
    .select_all {
      padding: 25px 0 0 15px;
    }
    .float_left {
      float: left;
    }
    .float_right {
      float: right;
    }
    .total {
      width: 100%;
      padding-top: 10px;
      overflow: hidden;
      .price_div {
        float: left;
        margin-left: 10px;
        padding-top: 5px;
        .price_title {
          padding: 0 5px;
        }
        .count_span {
          color: #bababa;
          font-size: 14px;
          margin-right: 5px;
        }
        .dollars {
          font-size: 12px;
          color: #c89f62;
        }
        .money {
          color: #c89f62;
          font-size: 20px;
        }
      }
      .settlement_btn {
        margin-right: 10px;
        display: block;
        padding: 10px 10px;
        background: #fe5913;
        color: #fff;
        border-radius: 10px;
        float: right;
      }
    }
  }
}
</style>